<script setup lang="ts">
import { reactive } from 'vue';
import { SecsProtocol } from '../../common/enums';
import { ConnectionOptions } from '../../common/types';

const data = reactive<{ identity: string, protocol: SecsProtocol, deviceId: number, systemByte: number }>({
    identity: "",
    protocol: SecsProtocol.HSMS,
    deviceId: 0,
    systemByte: 0
});
const load = (options: ConnectionOptions) => {
    data.identity = options.identity;
    data.protocol = options.protocol;
    data.deviceId = options.deviceId;
    data.systemByte = options.systemByte;
}

const getData = () => {
    return { ...data };
}

defineExpose({ load, getData })

</script>
<template>
    <table class="app-table-1">
        <tbody>
            <tr>
                <td style="width: 90px;">
                    Id
                </td>
                <td>
                    <el-input v-model="data.identity" style="width: 182px" />
                    <span style="color: #666666;margin-left:5px;"> Affect to tab and log name</span>
                </td>
            </tr>
            <tr>
                <td>Protocol</td>
                <td>
                    <el-select v-model="data.protocol" style="width: 182px">
                        <el-option label="Secs1" :value="SecsProtocol.Secs1" />
                        <el-option label="HSMS" :value="SecsProtocol.HSMS" />
                    </el-select>
                </td>
            </tr>
            <tr>
                <td> DeviceId</td>
                <td>
                    <el-input-number v-model="data.deviceId" :min="0" style="width: 182px" />
                </td>
            </tr>
            <tr>
                <td> System Byte</td>
                <td>
                    <el-input-number v-model="data.systemByte" :min="0" style="width: 182px" />
                </td>
            </tr>
        </tbody>
    </table>
</template>